<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Geocode</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript">
        </script>
        <script type="text/javascript">
         document.write('<script type="text/javascript" src="../src/arcgislink'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
        </script>
        <script type="text/javascript">
        var geocoder;
        var map;
        var markers;
        function init() {
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(40, -100), 4);
          
          map.addControl(new GMapTypeControl());
          map.addControl(new GLargeMapControl());
          map.addControl(new GScaleControl());
          map.enableDoubleClickZoom();
          map.enableContinuousZoom();
          map.enableScrollWheelZoom();
          
          var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer';
          geocoder = new ArcGISGeocodeService(url);
          GEvent.addListener(geocoder, 'load', function() {
            /* dynamically build form
            var fields=geocoder.addressFields;
            var html='';
            for (var i=0; i< fields.length; i++){
              html+=fields[i].alias+': <input type=text size=40 id="'+fields[i].name+'"/><br/>';
            }
            html+='<input type="button" onclick="geocode()" value="Geocode"/>';
            document.getElementById('gcform').innerHTML=html;
            */
          });
        }
          
          
        
        function geocode(){
          map.removeOverlays(markers); markers=[];
          var inputs = { };
          var fields=geocoder.addressFields;
          for (var i=0; i< fields.length; i++){
             inputs[fields[i].name]=document.getElementById(fields[i].name).value;
          }
          geocoder.findAddressCandidates({inputs: inputs}, function(results) {
              var markers = [];
              if (results.candidates) {
                for (var i = 0, c = results.candidates.length; i < c; i++) {
                  var marker=createMarker(results.candidates[i]);
                  map.addOverlay(marker);
                  markers.push(marker);
                  if (i == 0) {
                    map.setCenter(marker.getLatLng(),15);
                    GEvent.trigger(marker, 'click');
                  }
                }
              }
            });
        } 
        function createMarker(gc){
          var html='Matched Address:'+gc.address+'<br/>'
          +'Score:'+gc.score+'<br/>';
          if (gc.attributes){
            var attrs=gc.attributes;
            for (var x in attrs){
              if (attrs.hasOwnProperty(x)){
                html+=x+attrs[x]+'<br/>';
              }
            }
          }
          var latlng= ArcGISUtil.fromPointToLatLng(gc.location, geocoder.spatialReference);
          var marker=new GMarker(latlng,{title:gc.address});
          GEvent.addListener(marker,'click', function(){
            marker.openInfoWindowHtml(html);
          });
          return marker;
        } 
        
        
        </script>
    </head>
    <body onload="init()">
       <a href='../docs/examples.html'>More examples</a> | Use
       <a href='?packed'>Packed </a> | 
       <a href='?'> Unpacked</a> Version of the script.
       <br/>
        <div>
          example address: "380 new york st, redlands, ca 92373"
         </div>
          <form id="gcform" action='#'>
           Address: <input type=text size=40 id="Address" value="380 new york st"/><br/>
          City:  <input type=text size=40 id="City" value="redlands"/><br/>
          State:  <input type=text size=40 id="State" value="CA"/><br/>
          Zip:  <input type=text size=40 id="Zip" value="92373"/><br/>
           <input type="button" onclick="geocode()" value="Geocode"/>
          </form> 
         
        <div id="map" style="width:700px; height:400px; border:1px solid #000;">
        </div>
    </body>
</html>
